﻿@using ZhongKeSite.Entity;
@{
    string path = this.Context.Request.Path.Value.ToLower();
}
@model NewsInfo

<div class="banner banner-contact wow fadeInUp">
    <div class="container">
        <h1 class="title-page">推动人类生产技术颠覆性创新</h1>
    </div>
</div>
<div class="page page-contact page-news">
    <section class="container">
        <aside class="leftcol">
            <nav class="leftnav">
                <ul>
                    @foreach (Menu item in ViewBag.MenuMiddleLeft)
                    {
                        <li>
                            <a href="@item.Link" class="@(item.Link==path?"active":"")">@item.Title</a>
                        </li>
                    }
                </ul>
            </nav>
        </aside>
        <main class="content">
            @if (Model.RecommendNews != null)
            {
                <div class="webad wow fadeInUp">
                    <a href="/detail?id=@Model.RecommendNews.ID"><img src="@Model.RecommendNews.CoverImage" alt=""></a>
                    <div class="txt">
                        <h3> <a href="/detail?id=@Model.RecommendNews.ID">@Model.RecommendNews.Title</a></h3>
                    </div>
                </div>
            }
            <div class="newslist">
                <div class="row masonry" data-target=".item" data-col-xs="12" data-col-sm="6" data-col-md="4" data-col-lg="4" data-col-xl="3">
                    @foreach (News item in Model.NewsList)
                    {
                        <div class="col">
                            <div class="item wow fadeInUp">
                                <a href="/detail?id=@item.ID"><img src="@item.CoverImage" alt=""></a>
                                <div class="txt">
                                    <h3 class="title"> <a href="/detail?id=@item.ID">@item.Title</a></h3>
                                    <a class="share" href="/detail?id=@item.ID"><i class="iconfont iconshare"> </i>分享</a>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </main>
    </section>
</div>
@section scripts {
    <script src="~/portal/js/vendor/masonry/js/bootstrap4.masonry.min.js"></script>
    <script>
        $(function () {
            var $masonry = $('.masonry').masonry();

            $('.js-ajax').on('click', function () {
                var data = $('.masonry').html();

                // $masonry.push($(data).find('.item'));
                $(data).find('.item').each(function () {
                    $masonry.push($(this));
                });
            });
        })
    </script>
}
